<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apple Store Online</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3241864_y5olqh57uek.css">
    <link rel="stylesheet" href="../css/nav.css">
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../css/store.css">
</head>

<body>
    <!-- 导航栏 -->
    <nav id="global-nav">
        <ul class="header">
            <li class="nav-item">
                <a href="../index.html" class="nav-link iconfont icon-apple-fill"> </a>
            </li>
            <li class="nav-item"><a href="store.html" class="nav-link">Store</a></li>
            <li class="nav-item"><a href="./mac.html" class="nav-link">Mac</a></li>
            <li class="nav-item"><a href="./ipad.html" class="nav-link">iPad</a></li>
            <li class="nav-item"><a href="./iphonese.html" class="nav-link">iPhone</a></li>
            <li class="nav-item"><a href="./iphone13.html" class="nav-link">Watch</a></li>
            <li class="nav-item"><a href="#" class="nav-link">AirPods</a></li>
            <li class="nav-item"><a href="./homepod.html" class="nav-link">TV & Home</a></li>
            <li class="nav-item"><a href="./niublity.html" class="nav-link">Only on Apple </a></li>
            <li class="nav-item"><a href="#" class="nav-link">Accessories</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Support</a></li>
            <li class="nav-item">
                <a href="#" class="nav-link iconfont icon-search "> </a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link iconfont icon-bag "> </a>
            </li>
        </ul>
    </nav>
    <!-- 主体 -->
    <!-- 大标题 -->
    <div class="head section-center" id="store">
        <div class="left-text">Store. The best way to buy the products you love.</div>
        <div class="right-help">
            <div class="item">
                <image class="img" src="../images/store/help.jpg" />
                <div class="text">
                    <div class="help-info">Need shopping help?</div>
                    <a href="" class="help-link blue-link"> Ask a Specialist </a>
                </div>
            </div>
            <div class="item">
                <image class="img" src="../images/store/help.jpg" />
                <div class="text">
                    <div class="help-info">Visit an Apple Store</div>
                    <a href="" class="help-link blue-link">Find one near you </a>
                </div>
            </div>

        </div>
    </div>


    <!--产品轮播  -->
    <div class="lunbo-box">
        <div class="product-item">
            <img src="../images//store/78.png" alt="" class="product-img">
            <div class="product-name">Mac</div>
        </div>
        <div class="product-item">
            <img src="../images//store/77.png" alt="" class="product-img">
            <div class="product-name">Iphone</div>
        </div>
        <div class="product-item">
            <img src="../images//store/76.png" alt="" class="product-img">
            <div class="product-name">iPad</div>
        </div>
        <div class="product-item">
            <img src="../images//store/79.png" alt="" class="product-img">
            <div class="product-name">Apple Watch</div>
        </div>
        <div class="product-item">
            <img src="../images//store/71.png" alt="" class="product-img">
            <div class="product-name">AirPods</div>
        </div>
        <div class="product-item">
            <img src="../images//store/72.png" alt="" class="product-img">
            <div class="product-name">AirTag</div>
        </div>
        <div class="product-item">
            <img src="../images//store/73.png" alt="" class="product-img">
            <div class="product-name">Apple TV</div>
        </div>
        <div class="product-item">
            <img src="../images//store/75.png" alt="" class="product-img">
            <div class="product-name">HomePod mini</div>
        </div>
        <div class="product-item">
            <img src="../images//store/70.png" alt="" class="product-img">
            <div class="product-name">Accessories</div>
        </div>
        <div class="product-item">
            <img src="../images//store/74.png" alt="" class="product-img">
            <div class="product-name">Apple Gift Card</div>
        </div>
    </div>
    <!-- 卡片  -->
    <div class="card-wrapper">
        <h2 class="title"><span>The latest. </span>Take a look at what’s new, right now.</h2>

        <div class="card-box">
            <div class="card-item">
                <div class="head">
                    <div class="name">IPHONE 13 PRO</div>
                    <div class="title">Oh. So. Pro.</div>
                    <div class="info">Now in Alpine Green. From $999.00 or <br>$41.62/mo.per month for 24 mo.*</div>
                </div>

            </div>

            <div class="card-item ipadair">
                <div class="head">
                    <div class="name">IPAD AIR</div>
                    <div class="title">Light. Bright. Full of might.</div>
                    <div class="info">From $599 or $49.91/mo.per month for 12 mo.monthsFootnote†</div>
                </div>

            </div>
            <div class="card-item">
                <div class="head">
                    <div class="name">MAC STUDIO</div>
                    <div class="title">Empower station.</div>
                    <div class="info">From $1999 or $166.58/mo.per month for 12 mo.monthsFootnote†</div>
                </div>

            </div>
            <div class="card-item ">
                <div class="head">
                    <div class="name">STUDIO DISPLAY</div>
                    <div class="title">A sight to be bold.</div>
                    <div class="info">From $1599 or $133.25/mo.per month for 12 mo.monthsFootnote†</div>
                </div>

            </div>
        </div>

    </div>

    <!-- 页脚 -->
    <footer id="global-footer">
        <div class="footer-content">
            <div class="breadcrumbs">
                <a href="#" class="iconfont icon-apple-fill"></a>
                <ul class="paths">
                    <li class="path-item iconfont">
                        <span> Apple Store Online</span>
                    </li>
                    <li class="path-item iconfont">
                        <span> Apple Arcade</span>
                    </li>
                </ul>
            </div>

            <nav class="footer-list">
                <ul>
                    <h5>Shop and Learn</h5>
                    <li><a> Mac</a></li>
                    <li> <a>iPad</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>TV & Home</a></li>
                    <li> <a>Music</a></li>
                    <li> <a>iTunes</a></li>
                    <li> <a>HomePod</a></li>
                    <li> <a>iPod touch</a></li>
                    <li> <a>Apple Card</a></li>
                    <li> <a>Accessories</a></li>
                    <li> <a>Gift Cards</a></li>
                </ul>
                <ul>
                    <h5>Shop and Learn</h5>
                    <li><a> Mac</a></li>
                    <li> <a>iPad</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>TV & Home</a></li>
                    <li> <a>Music</a></li>
                    <li> <a>iTunes</a></li>
                    <li> <a>HomePod</a></li>
                    <li> <a>iPod touch</a></li>
                    <li> <a>Apple Card</a></li>
                    <li> <a>Accessories</a></li>
                    <li> <a>Gift Cards</a></li>
                </ul>
                <ul>
                    <h5>Shop and Learn</h5>
                    <li><a> Mac</a></li>
                    <li> <a>iPad</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>TV & Home</a></li>
                    <li> <a>Music</a></li>
                    <li> <a>iTunes</a></li>
                    <li> <a>HomePod</a></li>
                    <li> <a>iPod touch</a></li>
                    <li> <a>Apple Card</a></li>
                    <li> <a>Accessories</a></li>
                    <li> <a>Gift Cards</a></li>
                </ul>
                <ul>
                    <h5>Shop and Learn</h5>
                    <li><a> Mac</a></li>
                    <li> <a>iPad</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>TV & Home</a></li>
                    <li> <a>Music</a></li>
                    <li> <a>iTunes</a></li>
                    <li> <a>HomePod</a></li>
                    <li> <a>iPod touch</a></li>
                    <li> <a>Apple Card</a></li>
                    <li> <a>Accessories</a></li>
                    <li> <a>Gift Cards</a></li>
                </ul>
                <ul>
                    <h5>Shop and Learn</h5>
                    <li><a> Mac</a></li>
                    <li> <a>iPad</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>iPhone</a></li>
                    <li> <a>TV & Home</a></li>
                    <li> <a>Music</a></li>
                    <li> <a>iTunes</a></li>
                    <li> <a>HomePod</a></li>
                    <li> <a>iPod touch</a></li>
                    <li> <a>Apple Card</a></li>
                    <li> <a>Accessories</a></li>
                    <li> <a>Gift Cards</a></li>
                </ul>

            </nav>

            <div class="footer-info">
                <div class="shop"> More ways to shop: <a class="blue-link" href="#">Find an Apple Store</a> or <a class="blue-link" href="#">other retailer</a> near you. Or call 1‑800‑MY‑APPLE.</div>
                <div class="legal">
                    <div class="copyright">
                        Copyright © 2022 Apple Inc. All rights reserved.
                    </div>
                    <div class="links">
                        <a href="">Privacy Policy</a>
                        <a href="">Terms of Use</a>
                        <a href=""> Sales and Refunds</a>
                        <a href="">Legal</a>
                        <a href="">Site Map</a>
                    </div>
                    <div class="locale">United State</div>
                </div>
            </div>
        </div>
    </footer>
</body>

</html>